// 表格
.table {
  border: 1px solid var(--color-white);
  border-bottom: none;
  border-right: none;

  &__th,
  &__tr {
    display: flex;
    border-bottom: 1px solid var(--color-white);
  }

  &__th {
    font-size: 14px;
    text-align: center;
  }

  &__td {
    @extend .flex-center;
    display: flex;
    flex: 1 0;
    min-height: 35px;
    padding: 5px 0;
    word-break: break-all;
    border-right: 1px solid var(--color-white);
  }

  &--border {
    @extend .bd;

    .table__th,
    .table__tr {
      &:not(:last-child) {
        .table__td {
          @extend .bd-bottom;
        }
      }
    }

    .table__td {
      &:not(:last-child) {
        @extend .bd-right;
      }
    }
  }

  &--stripe {
    .table__tr {
      &:nth-child(2n) {
        background-color: var(--color-bg);
      }
    }
  }

  &--white {
    .table__th,
    .table__tr {
      background-color: white;
      margin-top: 10px;
    }
  }
}

// 横向滚动列表
.scroll-x {
  white-space: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory; // 滚动完毕后，让子元素拥有一个停靠的边界（强制停靠）

  &__item {
    display: inline-block;
    scroll-snap-align: center; // 父元素滚动完毕后，子元素停靠在左侧

    &:not(:last-child) {
      margin-right: 15px;
    }
  }
}

// 数据列表
.list {
  &--border {
    .list__item {
      &:not(:last-child) {
        @extend .bd-bottom;
      }
    }
  }

  // 底部边距列表
  &--mb-10 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-10;
      }
    }
  }

  &--mb-15 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-15;
      }
    }
  }
}

// 圆点
.dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);

  &--white {
    background-color: white;
  }

  &--disabled {
    background-color: var(--color-border);
  }

  &--small {
    width: 7px;
    height: 7px;
  }
}

// 标题
.title {
  position: relative;
  font-size: 17px;
  padding-left: 10px;

  &--border {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      width: 3px;
      height: 80%;
      background-color: var(--color-primary);
    }
  }

  &--bg {
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      bottom: 0;
      margin: auto;
      width: 100px;
      height: 20px;
      background: url('@/assets/img/title_left.png') no-repeat left center /
        15px;
    }

    &::after {
      left: unset;
      right: -20px;
      background: url('@/assets/img/title_right.png') no-repeat right center /
        15px;
    }
  }
}
